<template>
    <div>
        <h1>这是 App 组件</h1>

        <!-- 为什么这里叫做 mt-button 的 button 直接就能用 -->
        <mt-button type="danger" icon="back" @click="show">default</mt-button>

        <mt-button size="large" plain>default</mt-button>
        
        <mt-button size="small" disabled>default</mt-button>

        <mybtn>12345</mybtn>

        <router-link to="/account">Account</router-link>
        <router-link to="/goodslist">Goodslist</router-link>
        
        <router-view></router-view>

    </div>
</template>

<script>
    // 按需导入 Toast 组件
    import { Toast } from "mint-ui"

    export default {
        data() {
            return {
                toastInstance: null
            }
        },
        created() {
            this.getList()
        },
        methods: {
            getList() {
                // 模拟获取列表的一个 AJax 方法
                // 在获取数据之前，立即 弹出 Toast 提示用户，正在加载数据
                this.show();
                setTimeout(() => {
                    // 当 3 秒过后，数据获取回来了，要把 Toast 移除
                    this.toastInstance.close()
                }, 3000) 
            },
            show() {
                this.toastInstance = Toast({
                    message: '这是消息',
                    position: 'top',
                    // 如果是 -1 弹出之后不消失
                    duration: -1,
                    // 这是设置图标的类（图标需自行准备）
                    iconClass: 'glyphicon glyphicon-ok',
                    // 这是自定义Toast的样式，需要自己提供一个类名
                    className: 'myToast'
                });
            }
        }
    }
</script>

<style>

</style>